/* 一、重置样式 */
h3,h4, h5{
	margin: 0;
}

a{
	text-decoration: none;
}

/* 二、适配样式 */
/* 约束当屏幕大于750px的时候，html字体大小就不变化了 */
@media screen and (min-width: 750px) {
	html{
		font-size: 37.5px !important;
	}
}
/* 约束当屏幕小于320px的时候，html字体大小就不变化了 */
@media screen and (max-width: 320px) {
	html{
		font-size: 16px !important;
	}
}

/* 三、业务样式 */
body{
	margin: 0 auto;
	min-width: 320px;
	max-width: 750px;
	height: 100px;
	background: #F2F4F7;
}

/* 3.1 导航&banner 模块 */
.wrapper{
	background: #ffffff;
}

/* 头部 */
.title{
	height: 2.1333rem;
	text-align: center;
	line-height: 2.1333rem;
	font-size: .9333rem;
	color: #1C1C1C;
	border-bottom: 1px solid #EAEAEA;
}

/* 导航 */
.nav{
	display: flex;
	flex-wrap: wrap;
	margin: 1.1733rem 0;

	/* 重复项 */
	.item{
		display: flex;
		flex-direction: column;
		align-items: center;
    width: 33.33%;
		height: 5.2267rem;

		img{
			width: 3.7067rem;
			height: 3.7067rem;
		}

		span{
			margin: .4267rem 0;
			font-size: .6667rem;
			color: #707070;
		}
  }
}

/* banner */
.banner{
	padding-bottom: 1.1467rem;

	img{
		margin: 0 auto;
		width: 19.2533rem;
		height: 4.0533rem;
	}
}

/* 3.2 就业指导 模块 */
.guide{
	margin: .2667rem 0;
	padding: 1.0667rem .64rem;

	/* 标题 */
	.guide-title{
		display: flex;
		justify-content: space-between;
    margin-bottom: .9067rem;
		height: 1.0133rem;

		h4{
			display: flex;
			align-items: center;
			font-size: .7467rem;
			line-height: 1.0133rem;
			font-weight: 700;
			color: #333333;

			&:before{
				display: inline-block;
				margin-right: .48rem;
			 
				content: '';
				width: 1.0133rem;
				height: 1.0133rem;
				background-image: url("../icons/guide@2x.png");
				background-repeat: no-repeat;
				background-size: contain;
			}
		}

		.more{
			font-size: .5867rem;
			color: #999999;
			line-height: 1.0133rem;
		}
	}

	/* 轮播图 */
	.guide-carousel{
    position: relative;

		/* swiper示例 css代码  开始*/
		.swiper-container {
      width: 14.4rem;
      height: 100%;
    } 

    .swiper-slide {
      text-align: center;
      font-size: 18px;
      background: #fff;

      /* Center slide text vertically */
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
			/* 竖向显示 */
			flex-direction: column;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
	  	transition: 300ms;
	  	transform: scale(0.8);
      /* 透明度 */
      opacity: 0.4;

			a{
				width: 9.0133rem;
				height: 10.0267rem;

				img{
					width: 100%;
					height: 100%;
				}
			}

			p{  
        margin-top: .64rem;
				width: 9.0133rem;
				font-size: .6667rem;
				color: #333333;
			}
    }
		.swiper-slide-active,.swiper-slide-duplicate-active{
      z-index: 999;
      opacity: 1;
			transform: scale(1);
		}
		/* swiper示例 css代码 结束*/

    /* 左右切换箭头 */
    .swiper-button-next:after, 
    .swiper-button-prev:after {
      font-size: 1.066667rem;
      color: #333;
    }
	}
}

/* 3.3 充电学习 模块 */
.learn{
  padding: .6667rem .64rem 3.7333rem .64rem;

  /* 标题 */
  .learn-title{
    .guide .guide-title;

    margin: 0 0.64rem 0.9067rem 0;

    h4{

      &::before{
        background-image: url("../icons/learn@2x.png");
      }
    }
  }

  /* 轮播图 开始 */
  .swiper {
    padding: .2667rem;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

  .swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;

    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;

    /* 定制样式 */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding: .24rem .1867rem 0 .1867rem;
    width: 7.7333rem ;
    height: 9.0667rem ;
    border-radius: .2667rem;
    box-shadow: 0 0 .2667rem rgba(0, 0, 0, 0.1);

    h5{
      margin: .48rem 0 0.64rem .16rem;
      font-weight: normal;
      font-size: .7467rem;
      text-align: left;
    }

    p{
      padding-left: .3733rem;
      width: 100%;
      text-align: left;
      font-size: .6933rem;
      color: #999999;

      span{
        color: #f40;
      }
    }
  }

  .swiper-slide img {
    display: block;
    width: 100%;
    height: 4.5333rem;
    object-fit: cover;

    border-radius: .1067rem;
  }
  /* 轮播图 结束 */
}

/* 3.4 底部tabbar 模块 */
.tabbar{
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 999;
  display: flex;
  padding: .5333rem 0;
  width: 100%;
  height: 3.04rem;
  border-top: 1px solid #E2E2E2;
  background: #fff;

  .item{
    display: flex;
    flex-direction: column;
    flex: 1;
    align-items: center;
    color: #666666;

    i{
      font-size: 1.0667rem;
    }

    span{
      margin-top: 0.266667rem;
      font-size: 0.586667rem;
    }

    &.active{
      color: #63cced;
    }
  }
}